<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>档案回收站</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css">
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
    <script src="../../../lib/layui-v2.5.5/layui.all.js"></script>
    <script src="../../../lib/layui-v2.5.5/layui.js"></script>
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.3/qs.js"></script>
    <script src="../../../lib/common/jquery.cookie.min.js"></script>
    <script src="config/common.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="app">
            <div>
                <fieldset class="layui-elem-field">
                    <legend>搜索信息</legend>
                    <div class="layui-field-box" style="margin-left: 300px ">
                        <label for="">名称： </label>
                        <el-input v-model="record.productName" style="display: inline-block;width: 200px"
                                  placeholder="产品档案名称"></el-input>
                        <label for="">日期： </label>
                        <el-date-picker
                                v-model="record.registerTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择建档日期">
                        </el-date-picker>
                        <el-button type="primary" @click="findPage()" icon="el-icon-search">搜索</el-button>
                    </div>
                </fieldset>
                <div>

                    <el-table
                            :data="recordList"
                            ref="multipleTable"
                            v-loading="loading"
                            border
                            @selection-change="handleSelectionChange"
                            style="width: 100%;margin: 0 auto">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column type="expand" label="详细" width="50">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="产品ID">
                                        <span>{{ props.row.productId }}</span>
                                    </el-form-item>
                                    <el-form-item label="产品名称">
                                        <span>{{ props.row.productName }}</span>
                                    </el-form-item>
                                    <el-form-item label="厂商">
                                        <span>{{ props.row.factoryName }}</span>
                                    </el-form-item>
                                    <el-form-item label="配置">
                                        <span>{{ props.row.productClass }}</span>
                                    </el-form-item>
                                    <el-form-item label="保修期">
                                        <span>{{ props.row.warranty }}</span>
                                    </el-form-item>
                                    <el-form-item label="市场单价">
                                        <span>{{ props.row.listPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="成本单价">
                                        <span>{{ props.row.realCostPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="单位">
                                        <span>{{ props.row.amountUnit }}</span>
                                    </el-form-item>
                                    <el-form-item label="产品经理">
                                        <span>{{ props.row.responsiblePerson  }}</span>
                                    </el-form-item>
                                    <el-form-item label="登记人">
                                        <span>{{ props.row.register  }}</span>
                                    </el-form-item>
                                    <el-form-item label="产品描述">
                                        <span>{{ props.row. productDescribe }}</span>
                                    </el-form-item>
                                    <el-form-item label="建档时间">
                                        <span>{{ props.row.registerTime }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="ID"
                                prop="id">
                        </el-table-column>
                        <el-table-column
                                label="商品名称"
                                prop="productName">
                        </el-table-column>
                        <el-table-column
                                label="描述"
                                prop="productDescribe">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="160">
                            <template slot-scope="scope">
                                <el-button-group>
                                    <el-tooltip class="item" effect="dark" content="恢复档案" placement="top-start">
                                        <el-button type="primary" size="small" @click="recover(scope.row)"
                                                   icon="el-icon-refresh-right"></el-button>
                                    </el-tooltip>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40,50,60]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        var vm = new Vue({
            el: '#app',
            data: {
                /*加载动画*/
                loading: true,
                /*产品档次*/
                page: 1,//页码
                pageSize: 10,//行数
                total: 0,//总记录数
                recordList: [],//展示的数据
                record: {//查询的条件
                    productName: "",//产品名称
                    registerTime: ""//建档时间
                },
            },
            methods: {
                /*分页条件查询*/
                findPage() {
                    axios.post(api1 + "/design_record/findPagerecycle?page=" + this.page + "&pageSize=" + this.pageSize, this.record).then(res => {
                        this.total = res.data.total;
                        this.recordList = res.data.data;
                        this.loading = false;
                    }).catch(err => {
                        vm.$message({//异常
                            showClose: true,
                            message: "获取超时，请检查网络",
                            type: 'error'
                        });
                    })
                },
                /*设置行数*/
                handleSizeChange(pageSize) {
                    this.pageSize = pageSize;
                },
                /*获取页码*/
                handleCurrentChange(page) {
                    this.page = page;
                    this.findPage();
                },
                /*全选*/
                toggleSelection(rows) {//全选选中
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                /*获取复选框选中的值 集合*/
                handleSelectionChange(value) {
                    this.deleterecords = value;
                },
                /*恢复档案*/
                recover(value) {
                    layer.confirm('确定恢复吗?', {icon: 3, title: '提示'}, function (index) {
                        axios.post(api1 + "design_record/recordrecover", value).then(res => {
                            if (res.data.success) {
                                vm.findPage();
                                vm.$message({//恢复成功
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.findPage();
                            } else {
                                vm.$message({//恢复失败
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                        }).catch(err => {

                        })
                        layer.close(index);
                    });
                }
            },
            created() {
                /*页面加载*/
                this.findPage();
            }
        });
    });

</script>
</html>
